<template>
    <div>
        <medicalDetails v-if="medicalShow" :medicalData="medicalData" :detailsShow="medicalShow" @noDetails="noDetails"></medicalDetails>
    <div class="officeSurplus" v-if="!medicalShow">
        <c-navigation>
            <c-time @change="timeChangeHandler"/>
        </c-navigation>
        <div class="echartsdiv">
            <p class="echartsp">医疗组超支结余分布</p>
            <div class="medicaldata">
                <div>
                <c-pie style=" margin: 0 auto;" :pieData="doctorGroupPieData" v-if="doctorGroupPieData.CountNumber" />
                </div>
                <div>
                    <c-top-rate :arrangeData="doctorGroupArrange" :RateTitle="'医疗组超支占比top5'"/>
                </div>
                <div>
                    <c-top-rate :arrangeData="SurplusArrange" :RateTitle="'医疗组结余占比top5'"/>
                </div>
            </div>
        </div>
        <div class="bottomList">
            <p>
                <RadioGroup :allLength="allLength"  :title="'医疗组'" :surplusLength="surplusLength" :overspendLength="overspendLength" @listChange="listChange"></RadioGroup>
                <span class="seedetail" @click="seedetail">查看各医疗组收费构成＞</span>
            </p>
            <a-table :columns="columns" class="custom"  :data-source="tableAnalysisData" :rowKey="record=>record['dg_id']" :scroll="{ y: '32vh' }">
                <div class="index" slot="dg_id" slot-scope="record, item,index">
                    <span type="text" style="margin-right: 10px;color: #6190F7;cursor: pointer" @click="medicalDetail(item)">查看明细</span>
                </div>
            </a-table>
        </div>
        <Mark v-if="markShow" @markClose="markClose"></Mark>
    </div>
    </div>
</template>

<script>
    import {selectDoctorGroupSurplusChart,doctorGroupOverrunsTop,doctorGroupSurplusTop,selectDoctorGroupAnalysis} from "@/api/Department";
    import moment from "moment";
    import RadioGroup from '@/components/radioGroup.vue'
    import Mark from '@/components/mark.vue'
    import CPie from "@/components/cPie.vue"
    import cTopRate from "@/components/cTopRate";
    import medicalDetails from './medicalDetails.vue'
    const echarts = require("echarts")
    import columns from "./columns.js";
    export default {
        name: 'medicalSurplus',
        components: {
            Mark,
            RadioGroup,
            CPie,
            cTopRate,
            medicalDetails
        },
        data() {
            return {
                columns:[],
                tableAnalysisData:null,
                markShow:false,
                medicalShow:false,
                timeParams: {
                    year: moment().format('YYYY'),
                    month: moment().format('MM')
                },
                doctorGroupPieData:[],
                doctorGroupArrange:[],
                SurplusArrange:[],
                allList:[],
                surplusList:[],
                overspendList:[],
                surplusLength:null,
                overspendLength:null,
                allLength:null,
                medicalData:null,
                total:null,
            }
        },
        created(){
            this.columns=columns
            this.getcircle()
            this.OverrunsTop()
            this.SurplusrunsTop()
            this.getAnalysisData()
        },
        mounted () {
            //this.circle()
        },
        methods: {
            markClose:function(e){
              this.markShow=e
            },
            timeChangeHandler(e) {
                this.timeParams = e;
                this.getcircle()
                this.OverrunsTop()
                this.SurplusrunsTop()
                this.getAnalysisData();
            },
            async OverrunsTop() {
                const params = {
                    ...this.timeParams
                }
                const res = await doctorGroupOverrunsTop(params);
                if (res['data']) {
                    this.doctorGroupArrange = res['data']['data'];
                    console.log(this.doctorGroupArrange )
                }
            },
            async SurplusrunsTop() {
                const params = {
                    ...this.timeParams
                }
                const res = await doctorGroupSurplusTop(params);
                if (res['data']) {
                    this.SurplusArrange = res['data']['data'];
                    console.log(this.SurplusArrange )
                }
            },
            async getcircle() {
                //const params = {...this.params};
                const res = await selectDoctorGroupSurplusChart(this.timeParams);
                if (res['data']) {
                    console.log(res['data'].data)
                    this.doctorGroupPieData=res['data']['data']
                }
            },
            async getAnalysisData() {
                const res = await selectDoctorGroupAnalysis(this.timeParams);
                if (res['data']) {
                    console.log(res)
                    this.allLength=res.data.length
                    this.surplusList= res.data.filter((res)=>{
                        return res.surplus>=0
                    })
                    this.surplusLength=this.surplusList.length
                    this.overspendList= res.data.filter((res)=>{
                        return res.surplus<0
                    })
                    this.overspendLength=this.overspendList.length
                    this.allList=res.data.map(element=> {
                        return element
                    })
                    this.tableAnalysisData=this.allList
                }
            },
            listChange(e){
                if(e==1){
                    this.tableAnalysisData=this.allList
                }
                else if(e==2){
                    this.tableAnalysisData=this.surplusList
                }
                else if(e==3){
                    this.tableAnalysisData=this.overspendList
                }
            },
            seedetail(){
                this.markShow=true
            },
            medicalDetail(e){
                this.medicalShow=true
                this.medicalData=e
            },
            noDetails(e){
                this.medicalShow=false
            },
        }
    }
</script>

<style lang="stylus" scoped>
    .echartsdiv{ height:260px; padding: 30px; box-sizing:border-box;background: #FFFFFF;
        box-shadow: 0 4px 8px 0 rgba(14,27,110,0.15), 0 2px 4px 0 rgba(14,24,101,0.20); border-radius:12px; margin-top 20px;}
    .echarts{ width:100%;height:270px; padding:20px 37px; box-sizing border-box}
    .echartsp{font-family: PingFangSC-Medium; font-size: 14px; color: #4B82FB; line-height: 14px;}
    .medicaldata{ width:100%; height:100%; display flex; }
    .medicaldata>div{ flex:1; }
    .bottomList{ width:100%;  margin-top 20px; padding 20px; box-sizing border-box;background: #FFFFFF;
        box-shadow: 0 4px 8px 0 rgba(25,25,26,0.15), 0 2px 4px 0 rgba(39,39,42,0.20); border-radius: 12px;}
    .bottomList P{ margin-bottom:20px;}
    .seedetail{ font-family: PingFangSC-Medium; font-size: 12px; color: #4B82FB; text-align: right; float right; cursor pointer; }
    .smalltitle{font-family: PingFangSC-Medium; font-size: 12px; color: #484D78; line-height: 12px; text-align center; font-weight bold;
    margin-top 0px; margin-bottom 10px;}
    .ulmedata li{ width: 100%; margin 0 auto;margin-bottom:16px;}
    .ulmedata li span{ display:inline-block; vertical-align top;}
    .medicalName{ text-align:right; width:240px;}
    .ulmedata li .progess{background: #5467E6; margin: 0 5px;border-radius: 4px; width:100px; height:12px; display inline-block;}

</style>
